<div class="l-wrapper">
    <table class="table l-alarm-rules-table">
        <colgroup>
            <col width="100%">
        </colgroup>
        <thead>
            <tr>
                <th>
                    <div class="l-table-title">
                        Alarm
                        <div>
                            <button class="btn btn-sm btn-blue" *ngIf="currentApplication" (click)="onReload()"><i class="fas fa-sync"></i></button>
                            <button class="btn btn-sm" [ngClass]="getAddButtonClass()" (click)="onShowCreateAlarmPopup()">+ Add</button>
                        </div>
                    </div>
                    <div class="l-alarm-rules-th">
                        <div>Rule Name</div>
                        <div>User Group</div>
                        <div class="l-threshold">Threshold</div>
                        <div>Type</div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 0;">
                    <div class="l-alarm-rules-tr-wrap">
                        <pp-alarm-rule-list
                            [alarmRuleList]="alarmRuleList"
                            (outRemove)="onRemoveAlarm($event)"
                            (outEdit)="onEditAlarm($event)"
                        ></pp-alarm-rule-list>
                        <div class="l-not-selected" *ngIf="!isApplicationSelected()">Select Application</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="l-message" [hidden]="!hasMessage()">
        <button class="btn btn-black" (click)="onCloseMessage()"><i class="fas fa-times"></i></button>
        <span>{{message}}</span>
    </div>
    <pp-alarm-rule-create-and-update
        [showCreate]="showCreate"
        [checkerList]="checkerList"
        [userGroupList]="userGroupList"
        [i18nLabel]="i18nLabel"
        [i18nGuide]="i18nGuide"
        [editAlarm]="editAlarm"
        (outUpdateAlarm)="onUpdateAlarm($event)"
        (outCreateAlarm)="onCreateAlarm($event)"
        (outClose)="onCloseCreateAlarmPopup()"
    ></pp-alarm-rule-create-and-update>
    <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>    
    <pp-loading [showLoading]="showLoading" [zIndex]="20"></pp-loading>                                        
</div>
